<template>
	<div class="articles">
		<div class="article" v-for="(article, index) in articleList.list" :key="index">
			<div class="article_div bordered" v-if="index % 2 === 0" @click="goArticle(article)">
				<el-image class="article_img" fit="cover" :src="article.bgImage" />
				<div class="article_right">
					<div class="top">
						<div class="top_div">
							<el-image class="icon" :src="clockIcon" />
							{{ moment(article.createTime).format('YYYY-MM-DD HH:MM:SS') }}
						</div>
						<div class="top_div">
							<el-image class="icon" :src="typesIcon" />
							{{ types[Number(article.type)] }}
						</div>
					</div>
					<div class="intro">
						<div class="title">{{ article.title.replace(".html", "") }}</div>
						<div class="article_intro">{{ article.intro }}</div>
					</div>
				</div>
			</div>
			<div class="article_div bordered" v-else @click="goArticle(article)">
				<div class="article_right">
					<div class="top">
						<div class="top_div">
							<el-image class="icon" :src="clockIcon" />
							{{ moment(article.createTime).format('YYYY-MM-DD HH:MM:SS') }}
						</div>
						<div class="top_div">
							<el-image class="icon" :src="typesIcon" />
							{{ types[Number(article.type)] }}
						</div>
					</div>
					<div class="intro">
						<div class="title">{{ article.title }}</div>
						<div class="article_intro">{{ article.intro }}</div>
					</div>
				</div>
				<el-image class="article_img" fit="cover" :src="article.bgImage" />
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import clockIcon from "@/assets/icon/time.png"
import typesIcon from "@/assets/icon/types.png"
import { articles } from "@/interface/articles";
import { getAll } from "@/api/db";
import ElMessage from "element-plus/lib/components/message/index.js";
import moment from "moment";

const router = useRouter();
const articleList: { list: Array<articles> } = reactive({ list: [] });
const goArticle = function (article: articles) {
	router.push({ path: "/article", query: { article: JSON.stringify(article) } });
};

const types = ["测试", "运维"]

// 获取博客的相关信息
getAll("blogs").then((ret: any) => {
	if (ret.status) articleList.list = ret.data;
	else return ElMessage({ type: "error", message: "数据获取失败" });
});

</script>
<style lang="less" scoped>
@import url("@/style/common.less");

.articles {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.article {
	width: 100%;
	height: 15rem;
	border-radius: 1rem;
	overflow: hidden;
	margin-bottom: 1rem;
	background: #fff;
	border: 1px dotted #baccd9;
}

.article_div {
	height: 100%;
	display: flex;
	justify-content: space-between;
}

.article_img {
	width: 50%;
}

.icon {
	width: 1rem;
	height: 1rem;
	margin-right: 1rem;
}

.article_right {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.top {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	margin-top: 1rem;
}

.top_div {
	display: flex;
}

.title {
	font-family: YuYang_03;
	color: orangered;
	font-size: 2rem;
}
</style>
